<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/shopping cart.css" />
		<script src="js/ajax.js"></script>
	</head>
	<body>
		<div class="header">
			<div class="h_link_bg">
				<div class="h_link">
					<div class="h_logo"><img src="img/register.png" alt="" /></div>
					<div class="h_content">
						<ul>
							<li><a href="login.html">登录</a></li>
							<li><a href="register.html">注册</a></li>
							<li><a href="">|</a></li>
							<li class="myCart">
								<a href="shopping cart.html">购物</a>
								<div class="car">

									<p>你的购物车暂时没有商品...</p>
									<p>快去抢购良仓商品吧!</p>

								</div>
							</li>
							<li><a href="">|</a></li>
							<li class="message">
								<a href="">消息</a>
								<div>
									<ul>
										<li><a href="#">动态<span>0</span></a></li>
										<li><a href="#">评论<span>0</span></a></li>
										<li><a href="#">私信<span>0</span></a></li>
										<li><a href="#">喜欢<span>0</span></a></li>
										<li><a href="#">粉丝<span>0</span></a></li>
										<li><a href="#">通知<span>0</span></a></li>
									</ul>
								</div>

							</li>
							<li><a href="">|</a></li>
							<li><a href="">添加良品</a></li>
							<li><a href="">资质证照|协议规则</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="h_nav">
				<ul>
					<li><a href="index.html">首页</a></li>
					<li class="good_type">
						<a href="goodlist.html">商店</a>
						<div>
							<div class="type_list">
								<ul>
									<!--<li>
										<a href="#">
										    <img src="img/nav_icon3.png" alt="" />
										    <p>玩乐</p>
										</a>
									</li>-->
								</ul>
							</div>
							<div class="type_img">
								<div><img src="img/nav_banner.jpg" alt="" /></div>
								<p>新视界:2024年12月刊</p>
							</div>
							<div class="type_link">
								<p>
									<a href="#">查看所有品牌</a>
									<a href="#">最新到货</a>
								</p>
							</div>
						</div>
					</li>
					<li class="magazine">
						<a href="magazine.html">杂志</a>
						<div>
							<ul>
								<li><a href="">趣物</a></li>
								<li><a href="">数码</a></li>
								<li><a href="">汽车</a></li>
								<li><a href="">文化</a></li>
								<li><a href="">时尚</a></li>
								<li><a href="">美食</a></li>
								<li><a href="">建筑</a></li>
								<li><a href="">空间</a></li>
								<li><a href="">圈子</a></li>
								<li><a href="">清洁</a></li>
								<li><a href="">活动</a></li>
								<li><a href="">视频</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">分享</a></li>
					<li><a href="#">达人</a></li>
					<li><a href="#">有偿资讯</a></li>
					<div class="search">
						<input type="text" name="keyWorks" id="searchInput" placeholder="请输入搜索关键词" />
						<div id="searchBtn"></div>
					</div>
				</ul>



			</div>
		</div>


		<div class="main">
			<div class="cart_top">
				<p>|<a href="">购物车</a>|<span><a href="">付款</a></span>|</p>
			</div>
			<div class="cart_list">
				<ul>
					<li><input type="checkbox" />全选</li>
					<li>良品</li>
					<li>数量</li>
					<li>单价(元)</li>
					<li>小计(元)</li>
					<li>操作</li>
				</ul>
			</div>


			<div class="cart_content">
				<div class="cart_items_container">

				</div>

				<div class="cart_img" id="emptyCart" style="display: none;">
					<img src="img/shopcar.png" style="height: 120px; width:150px;" />
					<p>您的购物车还是空的</p>
				</div>
			</div>

			<div class="cart_text">
				<p>良品总价/<a href="">￥18587.00</a></p>
				<p><button class="cart_btn" onclick="handleCheckout()">立即结算</button></p>
				<p class="text_cart">继续购物</p>
			</div>
		</div>




		<div class=" footer">
			<div class="logo">
				<div class="logo_title">
					<div class="logo_finger"></div>
					<div>
						<p>良仓商品/OUR SHOP</p>
					</div>
				</div>
				<div class="logo_list">
					<ul>
						<li>
							<div class="icon1"></div>
							<div>
								<p>全球精品</p>
								<p>Global Selections</p>
							</div>
						</li>
						<li>
							<div class="icon2"></div>
							<div>
								<p>正品保证</p>
								<p>Authenticity Guaranteed</p>
							</div>
						</li>
						<li>
							<div class="icon3"></div>
							<div>
								<p>全场包邮</p>
								<p>Free Delivery</p>
							</div>
						</li>
						<li>
							<div class="icon4"></div>
							<div>
								<p>客服邮箱</p>
								<p>kefu@iliangcang.com</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="footer_bg">
				<div class="footer_info">
					<div class="info">
						<div>
							<div class="icon_phone"></div>
							<div>
								<p>iPhone Android</p>
								<p>客户端下载</p>
							</div>
						</div>
						<div>
							<ul>
								<li><img src="img/dou.png" /></li>
								<li><img src="img/wb.png" /></li>
								<li><img src="img/qq.png" /></li>
							</ul>
						</div>
					</div>
					<div class="address">
						<p><a href="#">关于良仓</a>|<a href="#">服务协议</a>|<a href="#">隐私保护协议</a>|<a href="#">使用指南</a>|<a
								href="#">联系我们</a>|
							<a href="#">加入我们</a>|<a href="#">友情链接</a>|<a href="#">私信良仓</a>
						</p>
						<p>©2013-2019 北京良仓文化传播有限公司版权所有</p>
						<p>公司名称：北京良仓文化传播有限公司 客服邮箱：kefu@iliangcang.com</p>
						<p>公司地址：北京朝阳区百子湾路32号6号楼1层60号.</p>
						<p>社会信用统一代码：91110105059231575L 食品许可证：JY11105160159557 </p>
						<p>图书证名称：中华人民共和国出版物经营许可证 图书证编号：新出发京零 字第 朝 150051 号</p>
						<p>京ICP备13010677号-1 京公网安备11010502025627</p>
					</div>
				</div>
			</div>

			<div class="side">
				<div class="code">
					<div class="qrCode"><img src="img/orcode10.png" alt="" /></div>
					<div><button class="close"></button></div>
				</div>
				<div class="arrow"></div>

				<div class="concart">联系客服</div>
			</div>


		</div>
	</body>
	<script src="js/public.js"></script>
	<script src="js/shoppingcart.js"></script>
	<script>
		window.onload = function() {
			getGoodNavType((data) => {
				let typeList = document.querySelector(".type_list>ul");
				let goodListData = data.data;
				let text = '';
				goodListData.forEach((item, index) => {
					text += "<li><a href=''><img src ='" + item.cat_img + "'/><p>" + item.cat_name +
						"</p></a></li>"
				});
				typeList.innerHTML = text;

			});
		}
	</script>
	<script type="text/javascript" src="js/searchgood.js"></script>
	<script>
		//从localStorage安全读取购物车数据
		function getCartData() {
			try {
				const cart = JSON.parse(localStorage.getItem('cart') || '[]')
				return cart.filter(item =>
					item &&
					item.id !== undefined &&
					item.name &&
					item.price !== undefined
				)
			} catch (error) {
				console.error('读取购物车数据失败:', error)
				return []
			}
		}
         //渲染购物车界面
		function renderCart() {
			const cartContainer = document.querySelector('.cart_items_container')
			const emptyCart = document.getElementById('emptyCart')
			const cart = getCartData()
			cartContainer.innerHTML = ''
			if (cart.length === 0) {
				emptyCart.style.display = 'block'
				updateTotal()
				return
			}
			emptyCart.style.display = 'none'
			cart.forEach(item => {
				if (!validateCartItem(item)) {
					console.warn('无效的商品条目:', item)
					return
				}
				const subtotal = (item.price * item.quantity).toFixed(2)
				const itemHTML = `
	                    <div class="cart_item" data-id="${item.id}">
	                        <div class="cart_item_check">
	                            <input type="checkbox" checked />
	                        </div>
	                        <div class="cart_item_info">
	                            <img src="${item.image}" alt="${item.name}" class="cart_item_img">
	                            <div class="cart_item_name">${item.name}</div>
	                        </div>
	                        <div class="cart_item_quantity">
	                            <div class="quantity_btn">
	                                <button class="minus">-</button>
	                                <input type="number" min="1" value="${item.quantity}">
	                                <button class="plus">+</button>
	                            </div>
	                        </div>
	                        <div class="cart_item_price">¥${item.price.toFixed(2)}</div>
	                        <div class="cart_item_subtotal">¥${subtotal}</div>
	                        <div class="cart_item_action">
	                            <a href="javascript:;" class="remove">删除</a>
	                        </div>
	                    </div>
	                `
				cartContainer.insertAdjacentHTML('beforeend', itemHTML)
			})
			updateTotal()
		}
		//验证单个商品对象的完整性
		function validateCartItem(item) {
			return (
				item &&
				typeof item.id === 'string' &&
				typeof item.name === 'string' &&
				typeof item.price === 'number' &&
				item.price > 0 &&
				typeof item.quantity === 'number' &&
				item.quantity > 0
			)
		}


		// 总价计算
		function updateTotal() {
			const cart = getCartData();
			const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
			document.querySelector('.cart_text a').textContent = `¥${total.toFixed(2)}`;
		}
        //处理所有购物车交互事件
		function handleCartActions(e) {
			const target = e.target;
			const itemElement = target.closest('.cart_item');
			if (!itemElement) return;

			const itemId = itemElement.dataset.id;
			let cart = getCartData();

			if (target.classList.contains('remove')) {
				cart = cart.filter(item => item.id !== itemId);
			} else if (target.classList.contains('minus')) {
				const item = cart.find(i => i.id === itemId);
				if (item.quantity > 1) item.quantity--;
			} else if (target.classList.contains('plus')) {
				const item = cart.find(i => i.id === itemId);
				item.quantity++;
			} else if (target.tagName === 'INPUT' && target.type === 'number') {
				const item = cart.find(i => i.id === itemId);
				const newQuantity = Math.max(1, parseInt(target.value) || 1);
				item.quantity = newQuantity;
			}

			localStorage.setItem('cart', JSON.stringify(cart));
			renderCart();
		}

		// 全选功能
		function setupSelectAll() {
			const selectAll = document.querySelector('.cart_list input[type="checkbox"]');
			selectAll.addEventListener('change', function() {
				const checkboxes = document.querySelectorAll('.cart_item input[type="checkbox"]');
				checkboxes.forEach(checkbox => checkbox.checked = this.checked);
				updateTotal();
			});
		}

		// 初始化
		document.addEventListener('DOMContentLoaded', () => {
			document.querySelector('.cart_items_container').addEventListener('click', handleCartActions);
			document.querySelector('.cart_items_container').addEventListener('input', handleCartActions);

			setupSelectAll();
			renderCart();
		});
	</script>
</html>